<template>
  <div class="query">
    <mu-appbar title="订单查询" style="background:rgba(90,93,91,0.92);">
      <mu-icon-button icon="arrow_back" @click="back" slot="left"/>
      <!--<p slot="default">订单查询</p>-->
    </mu-appbar>
    <div class="goods">
      <!--<mu-paper class="content-card" :zDepth="3">-->

      <mu-paper>

        <mu-select-field class="form-item" @change="typeSelect" style="width: 93%" label="选择商品分类">
          <mu-menu-item v-for="item in goodsTypeList" :key="item.sequence" :value="item.id"
                        :title="item.category"/>
        </mu-select-field>
        <mu-select-field v-model="order.goodsId" @change="goodsSelect" class="form-item" style="width: 93%"
                         label="请选择您购买的商品">
          <mu-menu-item v-for="goods in goodsList" :key="goods.goodsId" :value="goods.goodsId"
                        :title="goods.goodsName"/>
        </mu-select-field>
        <mu-text-field label="预留码" class="form-item" v-model="order.payer" style="width: 93%"
                       hintText="下单时填写的QQ号或者手机号"/>
        <br/>
      </mu-paper>
      <mu-raised-button style="margin-top: 10px" label="查询" backgroundColor="rgb(211,168,9)" @click="queryOrder" primary
                        fullWidth/>
      <!--</mu-paper>-->
      <!--<div>
        <ul style="list-style: none">
          <li >商品名称</li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <h5></h5>

      </div>-->
    </div>
    <div class="result">
      <mu-paper>
        <div class="card-title">
          <h4 style="margin-left: 12px;color: orange">查询结果</h4>
        </div>

        <mu-table :showCheckbox="false">
          <mu-thead>
            <mu-tr>
              <mu-th>商品名称</mu-th>
              <mu-th>下单时间</mu-th>
              <mu-th>状态</mu-th>
            </mu-tr>
          </mu-thead>
          <mu-tbody>
            <mu-tr v-if="resultList.size !== 0" v-for="(item,index) in resultList" :key="index">
              <mu-td>{{item.goodsName}}</mu-td>
              <mu-td>{{item.orderTime}}</mu-td>
              <mu-td>{{item.state}}</mu-td>
            </mu-tr>
            <div v-if="showNothing" style="margin-top: 30px;margin-left: 10px">
              没找到你要的结果哦
            </div>
          </mu-tbody>
        </mu-table>
      </mu-paper>


    </div>

    <mu-dialog :open="dialog" title="提醒">
      你有选项忘了填啦~~~
      <mu-flat-button label="确定" slot="actions" primary @click="close"/>
    </mu-dialog>
  </div>
</template>

<script>
  import {getGoodsByTypeId, getGoodsType, queryTask} from "../api/api";

  export default {
    name: "query",
    data() {
      return {
        dialog: false,
        showNothing: false,
        goodsTypeList: [],
        order: {
          goodsId: null,
          payer: null,
        },
        goodsList: [],
        resultList: []
      }
    },
    methods: {
      close() {
        this.dialog = false
      },
      back() {
        this.$router.push('/')
      },
      getGoodsType() {
        getGoodsType().then(res => {
          this.goodsTypeList = res.data.data
        })
      },
      goodsSelect(value) {
        this.order.goodsId = value
        this.showNothing = false
      },
      typeSelect(value) {
        this.showNothing = false
        this.order = {
          goodsId: null,
          payer: null,
        }
        let params = {
          type_id: value
        }
        getGoodsByTypeId(params).then(res => {
          this.goodsList = res.data.data
        })
      },
      queryOrder() {
        this.showNothing = false
        let order = {
          goods_id: this.order.goodsId,
          payer: this.order.payer
        }
        if (this.order.payer === null || this.order.goodsId === null) {
          this.dialog = true
          return
        }
        queryTask(order).then(res => {
          this.resultList = res.data.data
          if (res.data.data.length === 0) {
            this.showNothing = true
          }
        })
      }

    },
    mounted() {
      this.getGoodsType()
    }

  }
</script>

<style>
  .query {
    background: rgb(211, 168, 9);
    margin-bottom: 80px;
  }
  .form-item {
    margin: 10px;

  }

  .goods {
    /*background: rgb(211, 168, 9);*/
    /*padding-left: 12px;
    padding-top: 8px;*/
    padding: 5px;
  }



  .result {
    /*margin-top: 5px;*/
    padding: 5px;
    /*margin-bottom: 60px;*/
  }

  .mu-table {
    table-layout: auto !important;
  }
</style>
